<template>
  <div class="steps">
    <a-steps :current="current">
      <a-step :title="$t('breach.steps.step1.title')" />
      <a-step :title="$t('breach.steps.step2.title')" />
      <a-step :title="$t('breach.steps.step3.title')" />
      <a-step :title="$t('breach.steps.step4.title')" />
    </a-steps>
    <div class="step-content">
      <step-1
        ref="step1"
        v-if="!current"
        :breachMode="breachMode"
        :lang="lang"
        :breachDetail="breachDetail"
        :ifCanEdit="ifCanEdit"
        :ifDispatch="ifDispatch"
        :ifStep2="false"
        @changeIfFlag="(newVal) => (ifFlag = newVal)"
      />
      <step-2
        ref="step2"
        v-if="current"
        v-show="current === 1 && !ifReviewing"
        :breachMode="breachMode"
        :lang="lang"
        :breachDetail="breachDetail"
        :ifCanEdit="ifCanEdit"
        :role="role"
        :current="current"
        :ifReviewing="ifReviewing"
        @changeCurrent="changeCurrent"
        @changeIfFlag="(newVal) => (ifFlag = newVal)"
        @updateEmail="updateEmail"
      />
      <step-3
        v-if="current"
        v-show="current === 2 && !ifReviewing"
        :breachMode="breachMode"
        :breachDetail="breachDetail"
        :ifCanEdit="ifCanEdit"
        :role="role"
        @changeCurrent="changeCurrent"
        @changeIfFlag="(newVal) => (ifFlag = newVal)"
      />
      <step-4
        v-if="current === 3 || ifReviewing"
        :breachDetail="breachDetail"
        :breachMode="breachMode"
        :lang="lang"
        :role="role"
        @changeCurrent="changeCurrent"
        @changeIfFlag="(newVal) => (ifFlag = newVal)"
      />
    </div>
    <a-modal
      v-model="ifvisible"
      :title="$t('app.setting.themecolor.rr100')"
      dialogClass="steps-confirm"
    >
      <template slot="footer">
        <span></span>
      </template>
      <div class="dlex">
        <a-button type="primary" @click="rollback">
          {{ $t("app.setting.themecolor.rr101") }}
        </a-button>
        <a-button type="primary" @click="submitSave()">
          {{ $t("app.setting.themecolor.rr102") }}
        </a-button>
        <a-button @click="ifvisible = false">
          {{ $t("app.setting.themecolor.rr103") }}
        </a-button>
      </div>
    </a-modal>
    <email
      ref="email"
      v-if="(current === 1 || current === 2) && role.includes('processor')"
      :breachId="breachId"
      :actionList="current === 1 ? undefined : breachDetail.actionList"
      type="fixed"
    />
  </div>
</template>

<script>
import { deleteDataBreach, getDetail } from "@/api/dataBreach/form";
import email from "./components/email.vue";
import step1 from "./components/step1.vue";
import step2 from "./components/step2.vue";
import step3 from "./components/step3.vue";
import step4 from "./components/step4.vue";
export default {
  name: "steps",
  components: { step1, step2, email, step3, step4 },
  data() {
    return {
      current: 1,
      breachMode: 1,
      lang: localStorage.getItem("lang").includes("zh-CN"),
      breachId: 0,
      ifCanEdit: false,
      ifDispatch: false,
      breachDetail: {},
      ifvisible: false,
      toPage: "",
      ifFlag: false,
      role: [],
      parentRole: {},
      ifReviewing: false
    };
  },
  created() {
    if (this.$route.params.Id || sessionStorage.getItem("refreshData")) {
      // 编辑或查看
      let refreshData = JSON.parse(
        sessionStorage.getItem("refreshData") || "{}"
      );
      this.breachId = this.$route.params.Id || refreshData.breachId;
      this.ifCanEdit =
        refreshData && typeof refreshData.ifCanEdit === "boolean"
          ? refreshData.ifCanEdit
          : this.$route.params.ifCanEdit
          ? true
          : false;
      this.parentRole = this.$route.params.role || refreshData.parentRole;
      if (!sessionStorage.getItem("refreshData")) {
        // 解决刷新问题
        sessionStorage.setItem(
          "refreshData",
          JSON.stringify({
            breachId: this.breachId,
            ifCanEdit: this.ifCanEdit,
            parentRole: this.parentRole,
          })
        );
      }
      this.updateCurrent();
    } else {
      // 新增
      this.ifDispatch = false;
      this.ifCanEdit = true;
      this.current = 0;
      this.breachMode = Number(this.$route.query.breachMode);
    }
  },
  mounted() {
    let that = this;
    window.addEventListener("setItemEvent", function (e) {
      if (e.key == "lang") {
        that.lang = e.value.includes("zh-CN");
      }
    });
  },
  methods: {
    async updateCurrent() {
      // 根据breachId获取详细信息后根据结果当前登陆人信息确定current
      let { data } = await getDetail({ Id: this.breachId });
      data = { ...data, role: this.parentRole };
      this.breachDetail = data;
      // 先判断角色
      // processor/业务用户business/协作者Collaborator
      // action owner/action approver/共享权限编辑shareEdit
      this.role = [];
      let rules = {
        processor: data.EventProcessed === this.$store.state.user.info.YtId,
        business: data.role.BusinessUsers,
        Collaborator: data.role.Collaborator,
        owner: data.role.ActionOwner,
        approval: data.role.ActionApproval,
        shareEdit: data.role.Write,
        shareView: data.role.View,
      };
      for (const key in rules) {
        if (Object.hasOwnProperty.call(rules, key)) {
          if (rules[key]) {
            this.role.push(key);
          }
        }
      }
      // 判断跳转到第几步
      switch (data.EventStatus) {
        case 1:
          // 草稿
          this.current = 0;
          break;
        case 2:
          // 已分配
          if (this.$store.state.user.info.AssignPersonnel === 1) {
            // 判断是否是分配人员
            if (this.ifCanEdit) {
              // 如果可以点编辑说明是其他角色，保证可以跳到第二步
              this.current = 1;
            } else {
              this.current = 0;
            }
          }
          break;
        case 3:
          // 待分配
          if (this.$store.state.user.info.AssignPersonnel === 1) {
            this.current = 0;
          }
          break;
        case 4:
          // 处理中
          if (this.role.includes("owner") || this.role.includes("approval")) {
            this.current = 2;
          } else if (
            this.role.includes("processor") ||
            this.role.includes("business") ||
            this.role.includes("Collaborator") ||
            // 特殊处理共享权限和角色processor
            (data.role.View && !this.ifCanEdit) ||
            (data.role.Write && this.ifCanEdit) ||
            this.$store.state.user.info.processor
          ) {
            this.current = 1;
          } else {
            this.current = 0;
          }
          break;
        case 5:
          // 已完成
          this.current = 3;
          break;
        default:
          this.current = 0;
          break;
      }
      // 判断类型是breach还是dlp
      this.breachMode = data.EventTemplate;
      if (!this.current) {
        // 如果是第一步还需判断是否是分配人员
        this.ifDispatch =
          this.breachDetail.EventStatus === 1
            ? false
            : this.$store.state.user.info.AssignPersonnel === 1
            ? true
            : false;
      }
    },
    async rollback() {
      this.ifFlag = true;
      if (!this.current && this.$route.query.Id) {
        // 新建不保存-删除
        await deleteDataBreach({ Id: this.$route.query.Id });
      }
      this.$router.push(this.toPage.path || "/breach/list");
    },
    submitSave() {
      if (!this.current) this.$refs.step1.addBreach("draft");
      else this.$refs.step2.saveDraft();
    },
    updateEmail() {
      this.$refs.email.init();
    },
    changeCurrent(newVal) {
      if(newVal !== 3) {
        if(!this.ifReviewing) this.current = newVal
        this.ifReviewing = false
        return
      }
      this.ifReviewing = true
    }
  },
  beforeRouteLeave(to, _, next) {
    this.toPage = to;
    if (!this.ifCanEdit || this.ifFlag || this.current === 3) {
      sessionStorage.removeItem("refreshData");
      next();
    } else {
      this.ifvisible = true;
      next(false);
    }
  },
};
</script>

<style lang="less" scoped>
.steps {
  padding: 40px 60px;
  background-color: #fafbff;
  .ant-steps {
    margin-bottom: 20px;
  }
  :deep(.step-content) {
    h2 {
      font-size: 20px;
      padding: 20px 0;
      border-bottom: 2px solid #6c6c6c;
      margin-bottom: 20px;
    }
    .step-buttons {
      display: flex;
      justify-content: center;
    }
    textarea {
      resize: none;
    }
  }
}
</style>
<style lang="less">
.steps-confirm {
  .dlex {
    display: flex;
    justify-content: space-evenly;
  }
}
</style>